<template>
	<div class="splits">
		<Split v-model="split1">
			<div slot="left" class="demo-split-pane">
				<div>
					<h1 style="text-align: center;">政策法规</h1>
					<List item-layout="vertical">
						<ListItem v-for="(item,index) in policy_data.purls" :key="item.name">
							<ListItemMeta :avatar="item.avatar" :title="item.name" :description="item.time" />
							<a :href="item.url" :id="index">详情请点击</a>
							<template slot="action">
								<li>
									<Icon type="ios-star-outline" /> 123
								</li>
								<li>
									<Icon type="ios-thumbs-up-outline" /> 234
								</li>
								<li>
									<Icon type="ios-chatbubbles-outline" /> 345
								</li>
							</template>
							<template slot="extra">
								<img src="../../assets/bg/test2.jpg" style="width: 240px">
							</template>
						</ListItem>
					</List>
				</div>
			</div>
			<div slot="right" class="demo-split-pane">
				<div class="otherPanel">
					<div class="subTitle">信息平台</div>
					<div class="xxptArea">
						<a href="http://zdscxx.moa.gov.cn:8080/misportal/public/agricultureIndexRedStyle.jsp" target="_blank">
							<img src="../../assets/bg/重点农产品市场信息平台LOGO3.jpg" alt="重点农产品市场信息平台">
						</a>
					</div>
					<div class="subTitlezs200">农产品批发价格200指数<a href="http://zdscxx.moa.gov.cn:8080/misportal/public/agriculture200Helper.jsp"
						target="_blank"><span style="margin-right:10px;font-size:14px;">解读</span></a></div>
					<div class="zs200Area">
						<iframe style="width: 100%; height: 100%;" src="http://zdscxx.moa.gov.cn:8080/misportal/public/200zs_2.jsp"></iframe>
					</div>
				</div>
				<div>
					<h3 style="text-align: left;">简单解读</h3>
				</div>
				<div v-for="(item,index) in policy_data.explain" v-bind:key="index" id="sim">
					<Divider>{{item.time}}</Divider>
					<p>{{item.con}}</p>
				</div>

			</div>
		</Split>
	</div>
</template>

// <script>
	export default {
		name: 'Main',
		components: {

		},
		data: function() {
			return {
				baseu: "../../assets/bg/test",
				index_num: "1",
				
				split1: 0.5,
				policy_data: {}
			}
		},
		mounted: function() {

			this.axios.get("/api/policy")
				.then(r => {
					this.policy_data = r.data
				})
				.catch(error => this.$Message.info("error" + error))
		},

	}
</script>

<style scoped>
	#sim {
		padding-left: 5px;
	}

	.subTitle {
		font-family: "microsoft yahei";
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
		display: table;
		border-bottom: 2px solid #c5282d;
		font-size: 18px;
		font-weight: bold;
		line-height: 35px;
		padding-left: 40px;
		background: no-repeat left center;
		background-image: url('../../assets/bg/重点农产品市场信息平台.png');

	}

	.otherPanel {
		position: relative;
		font-size: 14px;
		font-family: "microsoft yahei";
		list-style: none;
		left: 5px;
		width: 100%;
		height: 500px;
	}

	.xxptArea {
		font-size: 14px;
		font-family: "microsoft yahei";
		margin: 0;
		border: 0;
		list-style: none;
		border-top: 1px solid #eee;
		padding: 15px 0 10px 0;
	}

	.subTitlezs200 {
		font-family: "microsoft yahei";
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
		display: table;
		border-bottom: 2px solid #c5282d;
		font-size: 18px;
		font-weight: bold;
		line-height: 35px;
		padding-left: 40px;
		background: no-repeat left center;
		background-image: url('../../assets/bg/200.png');
		position: relative;
	}

	.zs200Area {
		position: relative;
		width: 490px;
		height: 300px;
		font-family: "microsoft yahei";
		/* border-top: 1px solid #eee; */
	}

	.explain {
		width: 80%;
		height: 200px;
		position: relative;
		left: 2px;
		top: 470px;
	}
</style>
